<template>
  <div anouce-list-component>
      <router-link v-bind:to="`/anouce/edit/${215}`">AnouceName</router-link>
    <Table  ref="selection" :columns="colums" :data="anouces" class="all-table"></Table>    
    <pager :page="page+1" :total="total" :size="size" @on-page-changed="p=>page=p-1"></pager>
  </div>
</template>

<script>
import api from '../../services/anouce.api'
import _ from '../../libs/utils'
import pager from '../common/pager.component'

export default {
    components:{
        pager
    },
    data () {
        return {
            anouces:[],
            total:1,
            page:0,
            size:2,
            colums: [
                {
                    title: '文章标题',
                    key: 'title',
                    render: (h, params) => h('div', [h('strong', params.row.title)])
                },
                {
                    title: '发布时间',
                    key: 'ctime',
                    width: 180,
                    align:'center',
                    render: (h, params) => h('div', _.dateTime(params.row.ctime))
                },
                    {
                    title: '操作',
                    key: 'action',
                    align:'center',
                    width: 180,                    
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small'},
                                style: { marginRight: '5px'},
                                on: {click: () => this.onEditClicked(params.index)}
                            }, "编辑"), 
                            h('Button', { 
                                props: { type: 'primary', size: 'small'},
                                style: { marginRight: '5px'},
                                on: { click: () => this.onTopClicked(params.index) }
                            }, '置顶'), 
                            h('Button', { 
                                props: { type: 'error', size: 'small' },
                                on: { click: () => this.onRemoveClicked(params.index) }
                            }, '删除')
                        ]);
                    }
                }
            ]
        }
    },

    methods: {
        onTopClicked(index) {
            let aid = this.anouces[index].id;
            api.topAnouce(aid, true).then(data=>{
                if(data.stat == "ok"){
                    this.$Message.success('置顶公告成功');                    
                    this.loadAnouces();
                }
                else{
                    this.$Message.error(`发生错误,错误码：${data.stat}`);
                }
            }).catch(err=>{
                this.$Message.error(`发生异常：${err.message}`);
            });           
        },
        onEditClicked(index){
            var aid = this.anouces[index].id;
            this.$router.push('/anouce/edit/'+aid);
        },
        onRemoveClicked(index){
            const msg = this.$Message.loading({
                content: 'loading···',
                duration: 0
            });

            var aid = this.anouces[index].id;
            api.deleteAnouce(aid).then(data=>{
                setTimeout(msg, 0);
                if(data.stat == "ok"){
                    this.loadAnouces();
                    this.$Message.success('删除公告成功');
                }
                else{
                    this.$Message.error(`发生错误,错误码：${data.stat}`);
                }
            }).catch(err=>{
                setTimeout(msg, 0);
                this.$Message.error(`发生异常：${err}`);
            })
        },
        loadAnouces(){
            const msg = this.$Message.loading({
                content: 'Loading...',
                duration: 0
            });
            api.listAnouces(this.page, this.size).then(data=>{
                setTimeout(msg, 0);
                if(data.stat == "ok"){
                    this.total = data.total;
                    this.anouces = data.ret;
                }
                else{
                    this.$Message.error(`发生错误,错误码：${data.stat}`);
                }
            }).catch(err=>{
                setTimeout(msg, 0);
                this.$Message.error(`发生异常：${err}`);
            })          
        }
    },

    watch:{
        page : function(val){
            this.loadAnouces()
        },
        '$route':function(v){
            
        }
    },

    created(){
        this.loadAnouces();
    }
}
</script>

<style scoped>
  [anouce-list-component] {
      overflow: auto;
  }
</style>